<template>
  <div class="castudy" style="background: #fff">
    <!-- 装修模块 -->

    <div style="width: 100%; background: white; padding-bottom: 1rem">
      <div
        class="abcase abp"
        style="border-radius: 10px; background: #ebecf0"
        v-for="(vlue, index) in houselist"
        @click="tocas(`${vlue.id}`)"
        :key="index"
      >
        <div style="padding-left: 5%" class="abcasetext">
          <p>
            户型面积：<span>{{ vlue.houseType }}|{{ vlue.houseArea }}²</span>
          </p>
          <p>
            装修报价：<span>{{ vlue.decorationPrice }}万</span>
          </p>
          <p>
            装修风格：<span>{{ vlue.decorationStyle }}</span>
          </p>
          <!-- <p>设计师：<span>蔡亮</span></p> -->
        </div>
        <div style="width: 45%">
          <p style="margin: 0">
            <img
              :src="vlue.picture"
              alt=""
              style="
                height: 120px;
                width: 100%;
                border-radius: 10px;
                object-fit: cover;
              "
            />
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { caselistly, stiler, byGroupId } from '@/api/api';
import scrollFixed from '@/mixin/scroll-fixed';
import { getLocalStorage } from '@/utils/local-storage';
import decorationlist from '@/components/decorationlist';
import logo_default from '@/assets/images/logo.jpg';

import { Toast } from 'vant';

export default {
  name: 'castudy',

  data() {
    return {
      houselist: '',
    };
  },

  created() {
    this.initViews();
  },

  watch: {},
  methods: {
    // 保护
    initViews() {
      caselistly({ shopId: Number(this.$route.params.id) }).then((res) => {
        let zeh = res.data.data.list;
        stiler({}).then((res) => {
          let cc = new Map();
          let dd = res.data.data.list;
          dd.forEach((e) => {
            cc.set(e.id, e.name);
          });
          zeh.forEach((t) => {
            if (cc.get(t.decorationStyle)) {
              t.decorationStyle = cc.get(t.decorationStyle);
            }
          });
          byGroupId({ groupId: 'DECORATION_HOUSE' }).then((res) => {
            let gg = res.data.data.list;
            let jj = new Map();
            gg.forEach((e) => {
              jj.set(e.itemValue, e.itemName);
            });
            zeh.forEach((f) => {
              if (cc.get(f.houseType)) {
                f.houseType = cc.get(f.houseType);
              }
            });
          });

          this.houselist = zeh;
        });
      });
    },
    tocas(id) {
      this.$router.push({ path: '/renovation/casedetails/' + id });
    },
  },

  components: {
    [Toast.name]: Toast,
  },
};
</script>

<style lang="scss" scoped>
// 装修案例
.abcase {
  width: 92%;
  margin: 10px auto;
  // height: auto;
  display: flex;

  // flex-flow排序方向
  flex-flow: row nowrap;
  //justify-content排序方式
}
.abp {
  height: 120px;
  .abcasetext {
    padding: 0 0.5rem;
    width: 55%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    color: #898a8e;

    p {
      line-height: 45px;
      // flex是flex-grow和flex-bases，flex-shrink的简写，用于分配剩余空间，忽略盒子内的长度（内容）
      height: 39px;
      margin: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    span {
      color: black;
    }
  }
}
.abcasetitle {
  p:nth-child(1) {
    font-size: 0.96rem;
    font-weight: 550;
  }
  p:nth-child(2) {
    line-height: 1.8rem;
    color: #b6b6b6;
    font-size: 0.6rem;
  }
}
</style>
